@pie-element/charting 12.1.1 → 12.1.2-next.0

package/configure.js

@@ -0,0 +1,2 @@
+export { default } from './dist/author/index.js';
+export * from './dist/author/index.js';

package/controller.js

@@ -0,0 +1 @@
+export * from './dist/controller/index.js';

package/dist/author/charting-config.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @synced-from pie-elements/packages/charting/configure/src/charting-config.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+export declare class ChartingConfig extends React.Component {
+    static propTypes: {
+        model: PropTypes.Validator<object>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        charts: PropTypes.Requireable<any[]>;
+        labelsPlaceholders: PropTypes.Requireable<object>;
+        titlePlaceholder: PropTypes.Requireable<object>;
+        showPixelGuides: PropTypes.Requireable<boolean>;
+        authorNewCategoryDefaults: PropTypes.Requireable<object>;
+        chartingOptions: PropTypes.Requireable<object>;
+    };
+    constructor(props: any);
+    handleAlertDialog: (open: any, callback: any) => void;
+    changeData: (data: any) => any;
+    changeAddRemoveEnabled: any;
+    changeTitle: (title: any) => any;
+    changeLabel: (type: any, label: any) => any;
+    render(): React.JSX.Element;
+}
+export default ChartingConfig;

package/dist/author/charting-config.js

@@ -0,0 +1,126 @@
+import * as e from "react";
+import t from "prop-types";
+import { styled as n } from "@mui/material/styles";
+import { color as r } from "@pie-lib/render-ui";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Chart as o } from "@pie-lib/charting";
+import { AlertDialog as s } from "@pie-lib/config-ui";
+import c from "@mui/material/Typography";
+import l from "@mui/material/Checkbox";
+//#region src/author/charting-config.tsx
+var u = n("div")(({ theme: e }) => ({
+	marginBottom: e.spacing(2.5),
+	display: "flex",
+	flex: 1
+})), d = n("div")(({ theme: e }) => ({ marginBottom: e.spacing(1) })), f = n("div")({ flex: 1 }), p = n(l)({ color: `${r.tertiary()} !important` }), m = (e, t) => {
+	if (!e) return t;
+	let n = [];
+	return (t || []).forEach((t, r) => {
+		let { editable: i, interactive: a } = t;
+		n[r] = {
+			label: i && e[r]?.label ? e[r].label : t.label,
+			value: a && e[r]?.value ? e[r].value : t.value,
+			editable: t.editable,
+			interactive: t.interactive
+		};
+	}), n;
+}, h = class extends e.Component {
+	static propTypes = {
+		model: t.object.isRequired,
+		onChange: t.func.isRequired,
+		charts: t.array,
+		labelsPlaceholders: t.object,
+		titlePlaceholder: t.object,
+		showPixelGuides: t.bool,
+		authorNewCategoryDefaults: t.object,
+		chartingOptions: t.object
+	};
+	constructor(e) {
+		super(e), this.state = { dialog: { open: !1 } };
+	}
+	handleAlertDialog = (e, t) => this.setState({ dialog: { open: e } }, t);
+	changeData = (e) => this.props.onChange({
+		...this.props.model,
+		data: e
+	});
+	changeAddRemoveEnabled = (e) => {
+		let { model: t } = this.props, n = m(t.correctAnswer.data, t.data);
+		e ? this.props.onChange({
+			...this.props.model,
+			addCategoryEnabled: e
+		}) : this.setState({ dialog: {
+			open: !0,
+			title: "Warning",
+			text: "This change will remove any correct answer categories that are not part of the initial item configuration.",
+			onConfirm: () => this.handleAlertDialog(!1, this.props.onChange({
+				...this.props.model,
+				addCategoryEnabled: e,
+				correctAnswer: { data: n }
+			})),
+			onClose: () => this.handleAlertDialog(!1)
+		} });
+	};
+	changeTitle = (e) => this.props.onChange({
+		...this.props.model,
+		title: e
+	});
+	changeLabel = (e, t) => this.props.onChange({
+		...this.props.model,
+		[e]: {
+			...this.props.model[e],
+			label: t
+		}
+	});
+	render() {
+		let { model: e, charts: t, labelsPlaceholders: n, titlePlaceholder: r, showPixelGuides: l, authorNewCategoryDefaults: m, chartingOptions: h, mathMlOptions: g = {}, labelsCharactersLimit: _ } = this.props, { dialog: v } = this.state, { domain: y = {}, range: b = {} } = e || {};
+		return /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i(d, { children: "Define Initial Chart Attributes" }), /* @__PURE__ */ i(u, { children: /* @__PURE__ */ a(f, { children: [
+			/* @__PURE__ */ i(c, {
+				component: "div",
+				type: "body1",
+				children: /* @__PURE__ */ i("span", { children: "Use the tools below to set up the chart as it will initially appear to students." })
+			}),
+			/* @__PURE__ */ i(o, {
+				defineChart: !0,
+				chartingOptions: h,
+				showPixelGuides: l,
+				chartType: e.chartType,
+				size: e.graph,
+				domain: y,
+				range: b,
+				charts: t,
+				data: e.data.map((e, t) => ({
+					...e,
+					index: t
+				})),
+				title: e.title,
+				onDataChange: this.changeData,
+				onChangeTitle: this.changeTitle,
+				onChangeLabels: this.changeLabel,
+				addCategoryEnabled: !0,
+				changeInteractiveEnabled: e.changeInteractiveEnabled,
+				changeEditableEnabled: e.changeEditableEnabled,
+				categoryDefaultLabel: m?.label,
+				categoryDefaults: m,
+				labelsPlaceholders: n,
+				titlePlaceholder: r?.label,
+				mathMlOptions: g,
+				labelsCharactersLimit: _
+			}),
+			e.changeAddCategoryEnabled && /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i(p, {
+				checked: e.addCategoryEnabled,
+				onChange: (e) => {
+					this.changeAddRemoveEnabled(e.target.checked);
+				}
+			}), h?.addCategory?.authoringLabel] }),
+			/* @__PURE__ */ i(s, {
+				open: v.open,
+				title: v.title,
+				text: v.text,
+				onClose: v.onClose,
+				onConfirm: v.onConfirm
+			})
+		] }, "graph") })] });
+	}
+};
+//#endregion
+export { h as default };

package/dist/author/configure.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @synced-from pie-elements/packages/charting/configure/src/configure.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class Configure extends React.Component {
+    static propTypes: {
+        onModelChanged: PropTypes.Requireable<(...args: any[]) => any>;
+        onConfigurationChanged: PropTypes.Requireable<(...args: any[]) => any>;
+        imageSupport: PropTypes.Requireable<object>;
+        uploadSoundSupport: PropTypes.Requireable<object>;
+        model: PropTypes.Validator<object>;
+        configuration: PropTypes.Validator<object>;
+        chartingOptions: PropTypes.Requireable<object>;
+    };
+    constructor(props: any);
+    onRationaleChange: (rationale: any) => any;
+    onPromptChange: (prompt: any) => any;
+    onTeacherInstructionsChange: (teacherInstructions: any) => any;
+    onChartTypeChange: (chartType: any) => any;
+    onConfigChange: any;
+    render(): React.JSX.Element;
+}
+export default Configure;

package/dist/author/configure.js

@@ -0,0 +1,205 @@
+import e from "./charting-config.js";
+import t from "./correct-response.js";
+import { applyConstraints as n, getGridValues as r, getLabelValues as i } from "./utils.js";
+import a from "react";
+import o from "prop-types";
+import { styled as s } from "@mui/material/styles";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { ConfigureChartPanel as u, chartTypes as d } from "@pie-lib/charting";
+import f from "debug";
+import { InputContainer as p, layout as ee, settings as m } from "@pie-lib/config-ui";
+import h from "@mui/material/Typography";
+import g from "@pie-lib/editable-html-tip-tap";
+//#region src/author/configure.tsx
+var _ = f("@pie-element:graphing:configure"), { Panel: te, toggle: v, radio: ne, dropdown: re, textField: ie } = m, y = s(p)(({ theme: e }) => ({
+	width: "100%",
+	paddingTop: e.spacing(2),
+	marginBottom: e.spacing(2)
+})), b = s(h)(({ theme: e }) => ({ marginBottom: e.spacing(2.5) })), x = s("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), S = [
+	d.Bar(),
+	d.Histogram(),
+	d.LineDot(),
+	d.LineCross(),
+	d.DotPlot(),
+	d.LinePlot()
+], C = class extends a.Component {
+	static propTypes = {
+		onModelChanged: o.func,
+		onConfigurationChanged: o.func,
+		imageSupport: o.object,
+		uploadSoundSupport: o.object,
+		model: o.object.isRequired,
+		configuration: o.object.isRequired,
+		chartingOptions: o.object
+	};
+	constructor(e) {
+		super(e);
+		let { range: t = {}, graph: n } = e.model || {}, a = { range: r(t, n.height, !0) }, o = { range: i(t.step || 1) };
+		this.state = {
+			gridValues: a,
+			labelValues: o
+		};
+	}
+	onRationaleChange = (e) => this.props.onModelChanged({
+		...this.props.model,
+		rationale: e
+	});
+	onPromptChange = (e) => this.props.onModelChanged({
+		...this.props.model,
+		prompt: e
+	});
+	onTeacherInstructionsChange = (e) => this.props.onModelChanged({
+		...this.props.model,
+		teacherInstructions: e
+	});
+	onChartTypeChange = (e) => this.props.onModelChanged({
+		...this.props.model,
+		chartType: e
+	});
+	onConfigChange = (e) => {
+		let { model: t, onModelChanged: r } = this.props, { gridValues: i, labelValues: a } = this.state, o = {
+			...t,
+			...e
+		}, { graph: s, range: c } = o, l = {}, u = {}, d = n(c, s.height, i.range, a.range);
+		l.range = d.gridValues, u.range = d.labelValues, this.setState({
+			gridValues: l,
+			labelValues: u
+		}), r(o);
+	};
+	render() {
+		let { configuration: n, imageSupport: r, model: i, onConfigurationChanged: a, onModelChanged: o, uploadSoundSupport: s } = this.props;
+		_("[render] model", i);
+		let { graph: d } = i, { baseInputConfiguration: f = {}, contentDimensions: p = {}, chartDimensions: m = {}, authorNewCategoryDefaults: h = {}, labelsPlaceholders: C = {}, instruction: w = {}, maxImageWidth: T = {}, maxImageHeight: E = {}, prompt: D = {}, rationale: O = {}, scoringType: k = {}, settingsPanelDisabled: ae, spellCheck: A = {}, studentInstructions: j = {}, teacherInstructions: M = {}, titlePlaceholder: N = {}, withRubric: P = {}, chartingOptions: F = {}, availableChartTypes: I = {}, mathMlOptions: L = {}, chartTypeLabel: R, language: z = {}, languageChoices: B = {}, labelsCharactersLimit: V } = n || {}, { errors: H, extraCSSRules: U, promptEnabled: W, rationaleEnabled: G, spellCheckEnabled: K, teacherInstructionsEnabled: oe, studentNewCategoryDefaultLabel: q } = i || {}, { categoryErrors: se, correctAnswerErrors: ce, prompt: J, rationale: Y, teacherInstructions: X } = H || {}, { gridValues: le, labelValues: ue } = this.state, de = m.showInConfigPanel || !0, Z = T && T.prompt, Q = E && E.prompt, fe = {
+			changeInteractiveEnabled: F.changeInteractive?.settings && v(F.changeInteractive.settingsLabel),
+			changeEditableEnabled: F.changeEditable?.settings && v(F.changeEditable.settingsLabel),
+			changeAddCategoryEnabled: F.addCategory?.settings && v(F.addCategory.settingsLabel)
+		}, pe = {
+			teacherInstructionsEnabled: M.settings && v(M.label),
+			studentInstructionsEnabled: j.settings && v(j.label),
+			rationaleEnabled: O.settings && v(O.label),
+			spellCheckEnabled: A.settings && v(A.label),
+			promptEnabled: D.settings && v(D.label),
+			scoringType: k.settings && ne(k.label, ["all or nothing", "partial scoring"]),
+			rubricEnabled: P?.settings && v(P?.label),
+			"language.enabled": z.settings && v(z.label, !0),
+			language: z.settings && z.enabled && re(B.label, B.options),
+			instruction: w.settings && ie(w.label)
+		}, $ = (e = {}) => ({
+			...f,
+			...e
+		});
+		return /* @__PURE__ */ l(ee.ConfigLayout, {
+			extraCSSRules: U,
+			dimensions: p,
+			hideSettings: ae,
+			settings: /* @__PURE__ */ c(te, {
+				model: i,
+				configuration: n,
+				onChangeModel: o,
+				onChangeConfiguration: a,
+				groups: {
+					Settings: fe,
+					Properties: pe
+				}
+			}),
+			children: [
+				/* @__PURE__ */ c(b, {
+					component: "div",
+					type: "body1",
+					children: w?.label || ""
+				}),
+				oe && /* @__PURE__ */ l(y, {
+					label: M.label,
+					children: [/* @__PURE__ */ c(g, {
+						markup: i.teacherInstructions || "",
+						onChange: this.onTeacherInstructionsChange,
+						imageSupport: r,
+						nonEmpty: !1,
+						error: X,
+						spellCheck: K,
+						pluginProps: $(M?.inputConfiguration),
+						maxImageWidth: T && T.teacherInstructions || Z,
+						maxImageHeight: E && E.teacherInstructions || Q,
+						uploadSoundSupport: s,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: L
+					}), X && /* @__PURE__ */ c(x, { children: X })]
+				}),
+				W && /* @__PURE__ */ l(y, {
+					label: D.label,
+					children: [/* @__PURE__ */ c(g, {
+						markup: i.prompt,
+						onChange: this.onPromptChange,
+						imageSupport: r,
+						nonEmpty: !1,
+						error: J,
+						spellCheck: K,
+						disableUnderline: !0,
+						pluginProps: $(D?.inputConfiguration),
+						maxImageWidth: Z,
+						maxImageHeight: Q,
+						uploadSoundSupport: s,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: L
+					}), J && /* @__PURE__ */ c(x, { children: J })]
+				}),
+				/* @__PURE__ */ c(u, {
+					model: i,
+					onChange: this.onConfigChange,
+					gridValues: le,
+					labelValues: ue,
+					chartDimensions: m,
+					charts: S,
+					studentNewCategoryDefaultLabel: q,
+					availableChartTypes: I,
+					chartTypeLabel: R
+				}),
+				/* @__PURE__ */ c(e, {
+					model: i,
+					onChange: o,
+					charts: S,
+					labelsPlaceholders: C,
+					titlePlaceholder: N,
+					showPixelGuides: de,
+					authorNewCategoryDefaults: h,
+					chartingOptions: F,
+					mathMlOptions: L,
+					labelsCharactersLimit: V
+				}),
+				/* @__PURE__ */ c(t, {
+					config: d,
+					model: i,
+					onChange: o,
+					charts: S,
+					error: se,
+					correctAnswerErrors: ce,
+					studentNewCategoryDefaultLabel: q,
+					mathMlOptions: L,
+					labelsPlaceholders: C
+				}),
+				G && /* @__PURE__ */ l(y, {
+					label: O.label || "Rationale",
+					children: [/* @__PURE__ */ c(g, {
+						markup: i.rationale || "",
+						onChange: this.onRationaleChange,
+						imageSupport: r,
+						error: Y,
+						spellCheck: K,
+						pluginProps: $(O?.inputConfiguration),
+						maxImageWidth: T && T.rationale || Z,
+						maxImageHeight: E && E.rationale || Q,
+						uploadSoundSupport: s,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: L
+					}), Y && /* @__PURE__ */ c(x, { children: Y })]
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { C as default };

package/dist/author/correct-response.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @synced-from pie-elements/packages/charting/configure/src/correct-response.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+export declare const getUpdatedCategories: (nextProps: any, prevProps: any, prevState: any) => any;
+export declare class CorrectResponse extends React.Component {
+    static propTypes: {
+        correctAnswerErrors: PropTypes.Requireable<object>;
+        studentNewCategoryDefaultLabel: PropTypes.Requireable<string>;
+        model: PropTypes.Validator<object>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        charts: PropTypes.Requireable<any[]>;
+        error: PropTypes.Requireable<string>;
+    };
+    constructor(props: any);
+    changeData: any;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any, prevState: any): void;
+    render(): React.JSX.Element;
+}
+export default CorrectResponse;

package/dist/author/correct-response.js

@@ -0,0 +1,116 @@
+import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/cloneDeep.js";
+import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEqual.js";
+import * as n from "react";
+import r from "prop-types";
+import { styled as i } from "@mui/material/styles";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Chart as s } from "@pie-lib/charting";
+import c from "@mui/material/Typography";
+//#region src/author/correct-response.tsx
+var l = i("div")(({ theme: e }) => ({
+	marginBottom: e.spacing(2.5),
+	display: "flex",
+	flex: 1
+})), u = i("div")({ flex: 1 }), d = i("div")(({ theme: e }) => ({ border: `2px solid ${e.palette.error.main}` })), f = i(c)(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), p = i("div")(({ theme: e }) => ({ marginBottom: e.spacing(1) })), m = (e, t) => e.map((e, n) => ({
+	...e,
+	editable: n < t.length ? t[n].editable : !0,
+	interactive: n < t.length ? t[n].interactive : !0,
+	deletable: n >= t.length
+})), h = (e, t) => {
+	if (!e) return t;
+	let n = [...e], r = [];
+	if ((t || []).forEach((t, n) => {
+		let i = t.editable, a = t.interactive;
+		r[n] = {
+			label: i && e[n]?.label ? e[n].label : t.label,
+			value: a && e[n]?.value || a && e[n]?.value == 0 ? e[n].value : t.value,
+			editable: t.editable,
+			interactive: t.interactive
+		};
+	}), r.length < e.length) {
+		let i = (n || []).slice(r.length, e.length);
+		return m((r || []).concat(i), t);
+	}
+	return r;
+}, g = (e, t) => {
+	let n = t.length - 1, { editable: r, interactive: i, deletable: a, ...o } = t[t.length - 1];
+	return (e || []).splice(n, 0, o), m([...e], t);
+}, _ = (e, t, n) => ((e || []).splice(n, 1), m([...e], t)), v = (t, n, r) => {
+	let i = t && t.model && t.model.data || [], a = n && n.model && n.model.data || [], o = e(t && t.model && t.model.correctAnswer && t.model.correctAnswer.data || []), s = e(r ? r.categories : []), c = [];
+	if (i.length > a.length) return c = g(o, i), c;
+	if (i.length < a.length) {
+		let e = i.length;
+		for (let t = 0; t < i.length; t++) if (i[t].index !== t) {
+			e = t;
+			break;
+		}
+		return c = _(s, i, e), c;
+	}
+	return c = h(o, i), c;
+}, y = class extends n.Component {
+	static propTypes = {
+		correctAnswerErrors: r.object,
+		studentNewCategoryDefaultLabel: r.string,
+		model: r.object.isRequired,
+		onChange: r.func.isRequired,
+		charts: r.array,
+		error: r.string
+	};
+	constructor(e) {
+		super(e), this.state = { categories: [] };
+	}
+	changeData = (e) => {
+		let { model: t, onChange: n } = this.props, { correctAnswer: r } = t || {};
+		n({
+			...t,
+			correctAnswer: {
+				...r,
+				data: e.map(({ interactive: e, editable: t, index: n, ...r }) => r)
+			}
+		});
+	};
+	componentDidMount() {
+		let e = v(this.props, this.props, null);
+		this.setState({ categories: e || h(this.props.model.correctAnswer.data, this.props.model.data) });
+	}
+	componentDidUpdate(e, n) {
+		let r = v(this.props, e, n);
+		r && !t(r, this.state.categories) && (this.changeData(r), this.setState({ categories: r }));
+	}
+	render() {
+		let { model: e, charts: t, error: n, studentNewCategoryDefaultLabel: r, correctAnswerErrors: i, mathMlOptions: m = {}, labelsPlaceholders: h = {} } = this.props, { categories: g } = this.state, { domain: _ = {}, range: v = {} } = e || {}, { identicalError: y, categoriesError: b } = i || {};
+		return /* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a(p, { children: "Define Correct Response" }), /* @__PURE__ */ a(l, { children: /* @__PURE__ */ o(u, { children: [
+			/* @__PURE__ */ a(c, {
+				component: "div",
+				type: "body1",
+				children: /* @__PURE__ */ a("span", { children: "Use the tools below to define the correct answer." })
+			}),
+			a(y || b ? d : "div", { children: /* @__PURE__ */ a(s, {
+				chartType: e.chartType,
+				size: e.graph,
+				domain: _,
+				range: v,
+				charts: t,
+				data: g,
+				title: e.title,
+				onDataChange: this.changeData,
+				addCategoryEnabled: e.addCategoryEnabled,
+				categoryDefaultLabel: r,
+				error: n,
+				mathMlOptions: m,
+				labelsPlaceholders: h
+			}) }, `correct-response-graph-${e.correctAnswer.name}`),
+			(y || b) && /* @__PURE__ */ a(f, {
+				component: "div",
+				type: "body1",
+				children: /* @__PURE__ */ a("span", { children: y || b })
+			})
+		] }, "graph") })] });
+	}
+};
+//#endregion
+export { y as default };